<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="author" content="Dzenan Ridjanovic"/>
    <title>Magic Boxes in Dart programming language</title>   
    <link rel="stylesheet" href="css/layout.css"/>
    <link rel="stylesheet" href="css/link.css"/>
    <link rel="stylesheet" href="css/list.css"/>
    <link rel="stylesheet" href="css/menu.css"/>
    <link rel="stylesheet" href="css/page.css"/>
  </head>
  
  <body>
    <header>
      <h2>Magic Boxes in Dart</h2>
      <!-- http://dev.opera.com/articles/view/html-5-canvas-the-basics/ -->
    </header>
    
    <nav>
     <ul>
       <li>Model
         <ul>
           <li><input type="text" id="model-name"/></li>
           <li><button id="open-model">Open</button></li>
           <li><button id="save-model">Save</button></li>
           <li><button id="close-model">Close</button></li>
         </ul>  
       </li>
       <li>Edit
         <ul>
           <li><button id="delete-selection">Delete</button></li>
         </ul>
       </li>
       <li>Select
         <ul>
           <li><button id="select-all">All</button></li>
           <li><button id="select-boxes">Boxes</button></li>
           <li><button id="select-lines">Lines</button></li>
           <li><button id="select-box-lines">Box lines</button></li>
           <li>
             <button id="select-lines-between-boxes">Between boxes</button>
           </li>
         </ul>
       </li>
       <li>View
         <ul>
           <li><button id="increase-selection-height">+ Height</button></li>
           <li><button id="decrease-selection-height">- Height</button></li>
           <li><button id="increase-selection-width">+ Width</button></li>
           <li><button id="decrease-selection-width">-Width</button></li>
           <li><button id="increase-selection-size">+ Size</button></li>
           <li><button id="decrease-selection-size">- Size</button></li>
           <li><button id="hide-selection">Hide</button></li>
           <li><button id="hide-non-selection">Hide non-selection</button></li>
           <li><button id="show-hidden">Show</button></li>
         </ul>
       </li>
       <li>Create
         <ul>
           <li><button id="create-boxes-in-diagonal">Diagonal</button></li>
           <li><button id="create-boxes-as-tiles">Tiles</button></li>
         </ul>
       </li>
       <li>About 
         <ul>
           <li>Magic Boxes in <a href="http://www.dart.org/">Dart</a></li>
           <li>Spiral 13</li>
           <li>2012-04-04</li>
           <li>
             <a href="https://plus.google.com/u/0/b/113649577593294551754/">
               On Dart
             </a>
           </li>
           <li>
             <a href="http://www.ondart.info/"><img src="img/ondart0.png"/></a>
           </li>
         </ul>   
       </li>
     </ul>
    </nav>
    
    <section> 
      <div id="scrollpane">
        <canvas id="canvas" width="990" height="580">
          Canvas is not supported in your browser.
        </canvas>  
      </div>  
      <footer> 
        <button id="select"><img src="img/select.png"/></button>
        <button id="line"><img src="img/line.png"/></button>
        <button id="box"><img src="img/box.png"/></button>
        &nbsp; &nbsp;
        <label>Board</label>
        <label for="canvasWidth">width</label>
        <input type="number" id="canvasWidth" min="990" size="5"/>
        <label for="canvasHeight">height</label>
        <input type="number" id="canvasHeight" min="580" size="5"/>
        <br/>
        <label for="boxName">Box</label>
        <input type="text" id="boxName"/>
        <label for="boxEntry">entry</label>
        <input type="checkbox" id="boxEntry"/>
        <br/>
        &nbsp; &nbsp;
        <label for="itemName">Item</label>
        <input type="text" id="itemName"/>
        <select id="itemCategory">
          <option>attribute</option>
          <option>guid</option>
          <option>identifier</option>
          <option>required</option>
        </select> 
        <select id="itemType">
          <option>String</option>
          <option>num</option>
          <option>int</option>
          <option>double</option>
          <option>bool</option>
          <option>Date</option>
          <option>Email</option>
          <option>Url</option>
          <option>Dynamic</option>
          <option>Other</option>
        </select>
        <label for="itemInit">init</label>
        <input type="text" id="itemInit" size="16"/>
        <button class="button" id="addItem">Add</button>
        <button class="button" id="getItem">Get</button>
        <button class="button" id="getNextItem">Get +1</button>
        <button class="button" id="getPreviousItem">Get -1</button>
        <button class="button" id="moveDownItem">Move +1</button>
        <button class="button" id="moveUpItem">Move -1</button>
        <button class="button" id="removeItem">Remove</button>     
        <br/>    
        <label>Line</label>
        <select id="lineCategory">
          <option>relationship</option>
          <option>inheritance</option>
          <option>reflexive</option>
          <option>twin</option>
        </select>
        <label for="lineInternal">internal</label>
        <input type="checkbox" id="lineInternal"/>
        <br/> 
        &nbsp; &nbsp;  
        <label id="line12Box1">Box1</label> ->
        <label id="line12Box2">Box2</label>
        <input type="text" id="line12Min" size="1"/> ..
        <input type="text" id="line12Max" size="1"/>
        <label for="line12Id">identifier</label>
        <input type="checkbox" id="line12Id"/>
        <label for="line12Name">name</label>
        <input type="text" id="line12Name"/> 
        <br/>
        &nbsp; &nbsp;
        <label id="line21Box2">Box2</label> ->
        <label id="line21Box1">Box1</label>
        <input type="text" id="line21Min" size="1"/> ..
        <input type="text" id="line21Max" size="1"/>
        <label for="line21Id">identifier</label>
        <input type="checkbox" id="line21Id"/>
        <label for="line21Name">name</label>
        <input type="text" id="line21Name"/> 
      </footer>
    </section>
    
    <section> 
      <button class="button" id="fromModelToJson">To JSON</button>
      <button class="button" id="fromJsonToModel">From JSON</button>
      <button class="button" id="clearJson">Clear</button>  
      <textarea name="modelJson" rows=20 cols=120 id="modelJson"></textarea>
    </section> 
    
    <section>
      <button class="button" id="fromModelToPng">To PNG</button>
      <button class="button" id="clearImage">Clear</button>
      <img alt="Your model as PNG." id="modelImage"/>
    </section>
    
    <script type="application/dart" src="MagicBoxes.dart"></script>
    <script 
      src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js">
    </script>
    
    <section>
      <header>
        <h3>Spiral 13: Final Touches</h3>
      </header>
      <p>
        With spiral 13, you can design a model such as the meta model 
        in the following diagram.
      </p>
      <p>
        <a href="#"><img src="model/metamodel.png"/></a> 
      </p>
    </section>
    
    <section>
      <header>
        <h3>Overview</h3>
      </header>
      <p>
        With the Magic Boxes tool you may create a model of boxes (concepts), 
        with items (attributes), and lines (relationships).
        Click the box tool in the tool bar (brown background) to create a box, 
        by clicking on an empty space in the board.
        To move a box, click the box and keep the mouse down while moving it.
        Click the box to select it. Click again to deselect it.
      </p>
      <p>
        The selected box is displayed in the tool bar.
        A name of the selected box may be entered in the Box field of 
        the tool bar.
        A box item may be created by entering its name in the Item field of 
        the tool bar and by clicking on the Add button.
        An existing item may be selected by entering its name and 
        clicking on the Get button. The next item is obtained by clicking 
        on the Get +1 button.
      </p> 
      <p>
        Click the line tool to create a line between two boxes by clicking 
        on the boxes, then by clicking on an empty space in the board.  
        Click the line to select it. Click again to deselect it.
        The selected line is displayed in the tool bar.
      </p>
      <p>
        Name the current model in the Model menu and 
        save it in a local storage of your browser.
        Later on, enter the model name and open it.
      </p>
    </section>
    
    <section>
      <header>
        <h3>Objective</h3>
      </header>
      <p>
        The Magic Boxes tool is developed in 
        <a href="http://www.dartlang.org/">Dart</a> to start learning Dart 
        (after reading the Getting Started section, developing the first 
        <a  href="http://goo.gl/udRZX">example</a>, 
        and the 
        <a href="https://github.com/dzenanr/pingpong">Ping Pong</a> game). 
        The tool is based on 
        <a href="http://code.google.com/p/magic-boxes/">Magic Boxes</a> and 
        <a href="http://www.modelibra.org/">Modelibra Modeler</a>,
        both developed in Java.
      </p>
      <p>
        The tool is developed in a step-by-step approach, spiral by spiral. 
      </p>
    </section>
    
     <section>
      <header>
        <h3>Spirals</h3>
      </header>
      <p> 
        The spiral approach to software learning and development, 
        which preserves a project history 
        as a series of code snapshots or spirals, 
        is used in this project. 
      </p>
      <p> 
        Learning new software concepts and technologies is a challenging task. 
        Learning in spirals, from simple to more advanced concepts 
        but with concrete software applications, helps students get a 
        reasonable confidence level early on, 
        and motivates them to learn by providing more useful applications. 
        With each new spiral, the project grows and new concepts are introduced.  
        A new spiral is explained with respect to the previous one.  
        The difference between two consecutive spirals is that the next spiral 
        has the new code introduced and the old code modified or deleted.  
        This is called learning by anchoring to what we already understand.  
        With a new spiral, we can come back to what we did previously and 
        improve it.  
        In this way, learning in spirals can touch the same topic several times, 
        but each time with more details in a better version.
      </p>
      <p> 
        There are many books where students have to learn quite a lot 
        before applying new concepts, and even then, 
        it is not obvious how to develop a complete software application. 
        It took me more than ten years of learning and teaching to find out 
        that the initial learning of a new technology must be task driven and 
        not topic (subject) driven.  
        Most software books are topic driven.  
        It takes a quick look at the Table of Contents of almost any 
        software book to realize that each chapter introduces a major topic. 
        In a spiral, there may be more than one topic and all of them 
        relate to what we want to accomplish with the spiral.
      </p>
    </section>
    
    <section>
      <header>
        <h3>Code</h3>
      </header>
      <p>
        The 
        <a href="https://github.com/dzenanr/MagicBoxes">code</a> 
        of Magic Boxes in Dart is kept at 
        <a href="https://github.com/">GitHub</a>. 
        If you are new to 
        <a href="http://sixrevisions.com/resources/git-tutorials-beginners/">
          Git
        </a>, 
        you should really 
        <a href="http://www.ralfebert.de/blog/tools/git_screencast/">start</a> 
        learning it. 
        However, if you are impatient to start learning Dart, you may want to 
        <a href="https://github.com/dzenanr/MagicBoxes/tags">download</a> 
        the spirals.
      </p> 
    </section>
     
    <section>
      <header>
        <h3>Tiny User Guide</h3>
      </header>      
      <p>
        Click the box tool to create a box (a concept in your domain), 
        by clicking on an empty space in the board.
        You have to select the box to enter its name in the 
        box field of the tool bar.
      </p>
      <p>
        To move a box, 
        click the box and keep the mouse down while moving it. 
        The connected lines will follow.
      </p>
      <p>
        Click the box to select it. Click again to deselect it. 
        The selected box is displayed in the tool bar.
        If there are several selected boxes (and/or lines), 
        you may deselect them all by clicking on an empty space in the board.
        For the last selected box, 
        its title (name) may be changed by entering text in the 
        Box field of the tool bar. 
      </p>
      <p>
        The last selected box, may be declared as entry into the model. 
        A new item may be added to the selected box by entering its name in 
        the Item box, then clicking on the Add button.
        The item is an attribute of the box (concept). 
        In addition, it may be declared as guid 
        (globally unique identifier--not significant to a user), 
        identifier (significant to a user) or required (mandatory value). 
        The choice is presented in the pop-up list. 
        A default type for an item is String. 
        An item type may be changed by selecting a different type 
        from the pop-up list.
        An item may have an initial (default) value.
        An existing item may be selected, to become the current item,
        by entering its name and clicking on the Get button.
        The next item is obtained by clicking on the Get +1 button.
        The previous item is obtained by clicking on the Get -1 button.
        The current item may be changed, 
        including its sequence position within the box 
        (Move + or Move -1 buttons), or even removed (Remove button). 
        The size of selected boxes may be changed 
        by menu items in the View menu. 
      </p>
      <p>
        If you want to create several boxes, 
        double-click the box tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
      <p>
        Click the line tool to create a line between the last two clicked boxes, 
        by clicking on an empty space in the board. 
        The first box is a parent and the second box is a child. 
        By default, the parent box has 0..N cardinalities. 
        The min is 0 and the max is N. 
        By default, the child box has 1..1 cardinalities. 
        An example is Department--0..N----1..1--Employee. 
        A department has from 0 to N employees and 
        an employee works for exactly one department.
      </p>
      <p>
        The line is a relationship between two boxes (concepts). 
        It has two directions: from parent to child (neighbor) and 
        from child to parent (neighbor).
        You cannot create more than two lines between the same two boxes.
        The selected line may be transformed (and obtained in the tool bar) 
        to inheritance line (child inherits from parent), 
        to reflexive line (one-parent box, not two boxes) or 
        to twin line 
        (two lines between the same two boxes must be first created). 
        The choice is presented in the pop-up list. 
        By default, a new line is internal. 
        The child box of the internal line usually is not an entry point 
        into the model. 
        The line cardinalities may be changed. 
        For the 1..1 cardinalities, the identifier (id) may be checked on.
      </p>
      <p>
        Click the line, or very close to it, to select it. 
        Click again to deselect it. 
        The selected line is displayed in the tool bar.
        A reflexive line is selected by clicking on a horizontal portion 
        of the line.
        If two lines are created between the same two boxes, 
        the last line may be selected by clicking on both lines.  
        The twin choice will separate the two lines into twins. 
        If there are several selected lines (and/or boxes), 
        you may deselect them all by clicking on an empty space in the board.
      </p>
      <p>
        If you want to create several lines, 
        double-click the line tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
      <p>
        Name the current model in the Model menu and 
        save it in a local storage of your browser.
        Later on, enter the model name and open it.
      </p>
      <p>
        Transform a model, but only non-hidden boxes and lines, to 
        <a href="http://www.json.org/">JSON</a> 
        by clicking on the To JSON button above the JSON panel.
        Copy the JSON text from the JSON panel into a local text file 
        to save the model. 
        Later, paste the JSON text into the JSON panel and click on 
        the From JSON button to obtain the model. 
      </p>
      <p>
        Transform a model to a 
        <a href="http://www.libpng.org/pub/png/">PNG</a> 
        image by clicking on the To PNG button in front of the PNG panel. 
        Copy the PNG image to a local text file.      
      </p>
    </section> 
    
  </body>
</html>
